<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘性初测实验抽样单</title>
    <link rel="stylesheet" href="./css/all.min.css">
    <script src="unit-codes.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'SimSun', '宋体', serif;
        }

        body {
            background: #fff;
            color: #000;
            line-height: 1.6;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            border: 1px solid #000;
            padding: 30px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 2px solid #000;
            padding-bottom: 20px;
            position: relative;
        }

        .back-btn {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #1a6dcc;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
            transition: background 0.3s;
        }

        .back-btn:hover {
            background: #0d4a9e;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .back-btn {
                position: relative;
                top: auto;
                transform: none;
                margin-bottom: 15px;
                width: 100%;
                justify-content: center;
            }
            
            .header {
                text-align: center;
                padding-bottom: 15px;
            }
        }

        .header h1 {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .form-section {
            margin-bottom: 25px;
        }

        .form-row {
            display: flex;
            margin-bottom: 15px;
            align-items: center;
        }

        .form-group {
            display: flex;
            align-items: center;
            margin-right: 30px;
        }

        .label {
            font-weight: bold;
            margin-right: 10px;
            min-width: 80px;
        }

        .input-field {
            border: 1px solid #000;
            padding: 5px 10px;
            font-size: 14px;
            min-width: 150px;
            background: #fff;
        }

        .input-field:focus {
            outline: 2px solid #000;
        }

        .date-group {
            display: flex;
            align-items: center;
        }

        .date-input {
            border: 1px solid #000;
            padding: 5px;
            width: 60px;
            text-align: center;
            margin: 0 5px;
        }

        .batch-section {
            border: 1px solid #000;
            padding: 15px;
            margin: 20px 0;
        }

        .batch-row {
            display: flex;
            margin-bottom: 10px;
            align-items: center;
        }

        .batch-input {
            border: 1px solid #000;
            padding: 5px 10px;
            width: 200px;
            margin-right: 20px;
        }

        .quantity-input {
            border: 1px solid #000;
            padding: 5px 10px;
            width: 100px;
        }

        .add-row-btn {
            background: #f0f0f0;
            border: 1px solid #000;
            padding: 5px 15px;
            cursor: pointer;
            margin-top: 10px;
        }

        .add-row-btn:hover {
            background: #e0e0e0;
        }

        .scannable {
            background: #ffffcc;
            border: 2px solid #ffcc00;
        }

        .scannable:focus {
            border: 2px solid #ff6600;
            background: #fff8dc;
        }

        .footer {
            margin-top: 30px;
            text-align: center;
            font-size: 12px;
            color: #666;
        }

        /* 条形码输入区域样式 */
        .barcode-input-section {
            background: #f8f9fc;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .barcode-input-row {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

        .barcode-label {
            font-weight: bold;
            min-width: 120px;
            color: #333;
        }

        .barcode-input {
            flex: 1;
            border: 1px solid #000;
            padding: 8px 12px;
            font-size: 14px;
            border-radius: 4px;
        }

        .barcode-btn {
            background: #1a6dcc;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            margin-left: 10px;
        }

        .barcode-btn:hover {
            background: #0d4a9e;
        }

        .barcode-btn.secondary {
            background: #6c757d;
        }

        .barcode-btn.secondary:hover {
            background: #545b62;
        }

        /* A4打印预览样式 */
        .print-preview {
            display: none;
            background: white;
            border: 1px solid #000;
            margin: 20px 0;
            padding: 20px;
            page-break-after: always;
        }

        .print-preview.show {
            display: block;
        }

        .preview-header {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 30px;
            border-bottom: 2px solid #000;
            padding-bottom: 15px;
        }

        .preview-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .preview-table td {
            border: 1px solid #000;
            padding: 8px 12px;
            vertical-align: top;
        }

        .preview-table .label-cell {
            background: #f0f0f0;
            font-weight: bold;
            width: 150px;
        }

        .preview-table .input-cell {
            min-height: 30px;
        }

        .batch-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }

        .batch-table th,
        .batch-table td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
        }

        .batch-table th {
            background: #f0f0f0;
            font-weight: bold;
        }

        /* 打印样式 */
        @media print {
            body * {
                visibility: hidden;
            }
            .print-preview, .print-preview * {
                visibility: visible;
            }
            .print-preview {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <button onclick="window.location.href='index.html'" class="back-btn">
                <i class="fas fa-home"></i> 返回首页
            </button>
            <h1>粘性初测实验抽样单</h1>
        </div>

        <!-- 条形码输入区域 -->
        <div class="barcode-input-section">
            <div class="barcode-input-row">
                <span class="barcode-label">条形码内容：</span>
                <input type="text" id="barcodeInput" class="barcode-input" placeholder="请输入21位条形码内容" maxlength="21">
                <button onclick="fillFormFromBarcode()" class="barcode-btn">
                    <i class="fas fa-magic"></i> 填充
                </button>
                <button onclick="generatePrintPreview()" class="barcode-btn secondary">
                    <i class="fas fa-print"></i> 打印预览
                </button>
            </div>
        </div>

        <div class="form-section">
            <div class="form-row">
                <div class="form-group">
                    <span class="label">机构名称:</span>
                    <input type="text" id="institutionName" class="input-field scannable" placeholder="请输入机构名称">
                </div>
                <div class="form-group">
                    <span class="label">机构代码:</span>
                    <input type="text" id="institutionCode" class="input-field scannable" placeholder="请输入机构代码" maxlength="4">
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <span class="label">抽样人员:</span>
                    <input type="text" id="sampler" class="input-field" placeholder="请输入抽样人员姓名">
                </div>
                <div class="form-group">
                    <span class="label">抽样日期:</span>
                    <div class="date-group">
                        <input type="text" id="year" class="date-input" placeholder="年" maxlength="4">
                        <span>年</span>
                        <input type="text" id="month" class="date-input" placeholder="月" maxlength="2">
                        <span>月</span>
                        <input type="text" id="day" class="date-input" placeholder="日" maxlength="2">
                        <span>日</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="batch-section">
            <h3 style="margin-bottom: 15px;">抽取批号及对应批次抽取的棉包数量</h3>
            <div id="batchContainer">
                <div class="batch-row">
                    <span class="label">批号:</span>
                    <input type="text" class="batch-input scannable" placeholder="请输入批号">
                    <span class="label">棉包数量:</span>
                    <input type="number" class="quantity-input" placeholder="数量">
                </div>
            </div>
            <button type="button" class="add-row-btn" onclick="addBatchRow()">添加批号行</button>
        </div>

        <div class="footer">
            <p>注：带黄色背景的字段可通过扫描枪输入</p>
        </div>

        <!-- A4打印预览 -->
        <div id="printPreview" class="print-preview">
            <div class="preview-header">粘性初测实验抽样单</div>
            <table class="preview-table">
                <tr>
                    <td class="label-cell">机构名称/代码</td>
                    <td class="input-cell" id="previewInstitution"></td>
                    <td class="label-cell">抽样人员</td>
                    <td class="input-cell" id="previewSampler"></td>
                </tr>
                <tr>
                    <td class="label-cell">抽样日期</td>
                    <td class="input-cell" id="previewDate" colspan="3"></td>
                </tr>
            </table>
            <div style="margin: 20px 0;">
                <strong>抽取批号及对应批次抽取的棉包数量</strong>
            </div>
            <table class="batch-table" id="previewBatchTable">
                <thead>
                    <tr>
                        <th>抽取批号</th>
                        <th>对应批次抽取的棉包数量</th>
                    </tr>
                </thead>
                <tbody id="previewBatchBody">
                </tbody>
            </table>
            <div style="text-align: center; margin-top: 30px;">
                <button onclick="window.print()" class="barcode-btn" style="font-size: 16px; padding: 12px 24px;">
                    <i class="fas fa-print"></i> 打印
                </button>
            </div>
        </div>
    </div>

    <script>
        // 扫描枪输入处理
        let currentFocusElement = null;

        document.addEventListener('focusin', function(e) {
            if (e.target.classList.contains('scannable')) {
                currentFocusElement = e.target;
                e.target.style.border = '2px solid #ff6600';
                e.target.style.background = '#fff8dc';
            }
        });

        document.addEventListener('focusout', function(e) {
            if (e.target.classList.contains('scannable')) {
                e.target.style.border = '2px solid #ffcc00';
                e.target.style.background = '#ffffcc';
            }
        });

        // 键盘输入处理（模拟扫描枪）
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' && currentFocusElement) {
                e.preventDefault();
                // 处理扫描枪输入的数据
                processScannedData(currentFocusElement.value);
                currentFocusElement.blur();
            }
        });

        // 处理扫描数据
        function processScannedData(data) {
            if (currentFocusElement.id === 'institutionCode') {
                // 机构代码处理
                const unitName = getUnitNameByCode(data);
                if (unitName !== "未知单位") {
                    document.getElementById('institutionName').value = unitName;
                }
            }
        }

        // 添加批号行
        function addBatchRow() {
            const container = document.getElementById('batchContainer');
            const newRow = document.createElement('div');
            newRow.className = 'batch-row';
            newRow.innerHTML = `
                <span class="label">批号:</span>
                <input type="text" class="batch-input scannable" placeholder="请输入批号">
                <span class="label">棉包数量:</span>
                <input type="number" class="quantity-input" placeholder="数量">
            `;
            container.appendChild(newRow);
        }

        // 自动填充当前日期
        window.onload = function() {
            const today = new Date();
            document.getElementById('year').value = today.getFullYear();
            document.getElementById('month').value = String(today.getMonth() + 1).padStart(2, '0');
            document.getElementById('day').value = String(today.getDate()).padStart(2, '0');
        };

        // 从条形码填充表单
        function fillFormFromBarcode() {
            const barcodeInput = document.getElementById('barcodeInput');
            const barcodeContent = barcodeInput.value.trim();
            
            if (!barcodeContent) {
                alert('请输入条形码内容');
                return;
            }
            
            if (barcodeContent.length !== 21) {
                alert('条形码长度必须为21位');
                return;
            }
            
            const parsedData = parseBarcode(barcodeContent.slice(-19));
            if (!parsedData) {
                alert('条形码格式错误，无法解析');
                return;
            }
            
            // 填充机构名称和代码
            document.getElementById('institutionName').value = parsedData.sendingUnitName;
            document.getElementById('institutionCode').value = parsedData.sendingUnitCode;
            
            // 填充日期
            document.getElementById('year').value = parsedData.year;
            document.getElementById('month').value = parsedData.month;
            document.getElementById('day').value = parsedData.day;
            
            alert('表单已根据条形码内容自动填充');
        }

        // 生成打印预览
        function generatePrintPreview() {
            const barcodeInput = document.getElementById('barcodeInput');
            const barcodeContent = barcodeInput.value.trim();
            
            if (!barcodeContent) {
                alert('请先输入条形码内容');
                return;
            }
            
            if (barcodeContent.length !== 21) {
                alert('条形码长度必须为21位');
                return;
            }
            
            const parsedData = parseBarcode(barcodeContent.slice(-19));
            if (!parsedData) {
                alert('条形码格式错误，无法解析');
                return;
            }
            
            // 填充预览内容
            document.getElementById('previewInstitution').textContent = 
                `${parsedData.sendingUnitName}/${parsedData.sendingUnitCode}`;
            document.getElementById('previewSampler').textContent = 
                document.getElementById('sampler').value || '待填写';
            document.getElementById('previewDate').textContent = parsedData.formattedDate;
            
            // 填充批号表格
            const batchBody = document.getElementById('previewBatchBody');
            batchBody.innerHTML = '';
            
            const batchInputs = document.querySelectorAll('.batch-input');
            const quantityInputs = document.querySelectorAll('.quantity-input');
            
            for (let i = 0; i < batchInputs.length; i++) {
                const batchNumber = batchInputs[i].value.trim();
                const quantity = quantityInputs[i].value.trim();
                
                if (batchNumber || quantity) {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                        <td>${batchNumber || ''}</td>
                        <td>${quantity || ''}</td>
                    `;
                    batchBody.appendChild(row);
                }
            }
            
            // 显示打印预览
            document.getElementById('printPreview').classList.add('show');
            
            // 滚动到预览区域
            document.getElementById('printPreview').scrollIntoView({ behavior: 'smooth' });
        }

        // 键盘事件处理（支持回车键填充）
        document.getElementById('barcodeInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                fillFormFromBarcode();
            }
        });
    </script>
</body>
</html> 